<template>
  <div  @click="() => {if(!isTry) isTry = !isTry}">
    <div id="search" class="flex-center-column">
      <span>Quickly find chemical information from authoritative sources</span>
        <div id="search_box" class="flex-center" @click.stop="()=> ''">
          <aside id="try" @click.stop="() => (isTry = !isTry)" class="handhover">
            Try
            <i v-if="isTry" class="el-icon-caret-bottom"></i>
            <i v-else class="el-icon-caret-top"></i>
          </aside>
          <!--<aside id="content">-->
          <input type="text" v-model="searchForm.gene"  style="margin-left: 10px;"/>
          <!--</aside>-->
          <aside id="button" class="flex-center" @click="handleSearch">
            <i class="el-icon-search"></i>
          </aside>
          <div id="search_box_muen" v-if="!isTry" @mouseleave="hideSearchBox">
            <h2>Not sure what to seach? Try these example:</h2>
            <ul>
              <li @click="searchForm.gene = '700-06-1'">
                <span class="title1">CAS#:</span
                ><span class="title2">700-06-1</span>
              </li>
              <li @click="searchForm.gene = 'Salicylic'">
                <span class="title1">Chemlcal Name:</span
                ><span class="title2">Salicylic</span>
              </li>
              <li @click="searchForm.gene = 'TR-580、TOX-48'">
                <span class="title1">Publication:</span
                ><span class="title2">TR-580、TOX-48</span>
              </li>
              <li @click="searchForm.gene = 'Radiofrequency radiation emissions from cellular phones'">
                <span class="title1">Project:</span
                ><span class="title2"
                  >Radiofrequency radiation emissions from cellular phones</span
                >
              </li>
              <li @click="searchForm.gene = '002-02223-0003-0000-4'">
                <span class="title1">CEBS Accessioon Number:</span
                ><span class="title2"
                  >002-02223-0003-0000-4</span
                >
              </li>
              <li @click="searchForm.gene = '20203-01'">
                <span class="title1">NTP TDMS Number:</span
                ><span class="title2"
                  >20203-01</span
                >
              </li>
              <li @click="searchForm.gene = 'Micronucieus'">
                <span class="title1">NTP Study Type:</span
                ><span class="title2"
                  >Micronucieus</span
                >
              </li>
              <li @click="searchForm.gene = 'Hematoloy'">
                <span class="title1">Data Typer:</span
                ><span class="title2"
                  >Hematoloy</span
                >
              </li>
              <!-- <li id="big_li" @click="searchForm.gene = 'TR-580、TOX-48'">
                <span class="title1">Study Number:</span>
                <div>
                  <div>
                    <span class="title3">CEBS Accessioon Number:</span
                    ><span class="title2">002-02223-0003-0000-4</span>
                  </div>
                  <div>
                    <span class="title3">NTP TDMS Number:</span
                    ><span class="title2">20203-01</span>
                  </div>
                </div>
              </li>
              <li id="big_li">
                <span class="title1">Study and Data Typer:</span>
                <div>
                  <div>
                    <span class="title3">NTP Study Type:</span
                    ><span class="title2">Micronucieus</span>
                  </div>
                  <div>
                    <span class="title3">Data Typer:</span
                    ><span class="title2">Hematoloy</span>
                  </div>
                </div>
              </li> -->
            </ul>
          </div>
        </div>
      <span
        >Hepatotoxicity&nbsp;aspirm&nbsp; C9H8O4&nbsp; C1=CC=C(C=C1)C=O</span
      >
    </div>
    <div id="main">
      <aside class="m1">
        <img :src="defaultImage" alt="" />
        <div class="content">
          <h3>{{info.iupac_name}}</h3>
          <ul>
            <li v-for="(item, index) in Object.entries(info)" :key="index">
              <span class="name">{{ item[0] }}:&nbsp;</span
              ><span class="value" v-html="item[1]"></span>
            </li>
          </ul>
          <button>approved</button><button>approved</button
          ><button>approved</button>
        </div>
      </aside>
      <aside class="m2">
        <div class="title">
          <div class="title1">Toxicity Category</div>
          <div class="title2" @click="DowloadToxicity"><i class="el-icon-download"></i>Dowload</div>
        </div>
        <div class="list">
          <el-tabs type="border-card" @tab-click="tabClickToxicity">
            <el-tab-pane
              :label="item.category"
              v-for="(item, index) in tabsItemsToxicity"
              :key="index"
              :idx="item.id"
            >
            </el-tab-pane>
            <slot class="tab-right">
              <el-table :data="tableDataToxicity" style="width: 100%">
                <el-table-column label="Smiles" sortable width="380">
                  <slot>
                    {{ info.smiles }}
                  </slot>
                </el-table-column>
                <el-table-column
                  prop="category"
                  label="Category"
                  sortable
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="toxicity_value"
                  label="Toxicity_value"
                  sortable
                  width="160"
                >
                </el-table-column>
                <el-table-column prop="num" label="Num" sortable width="80">
                </el-table-column>
                <el-table-column prop="source" label="source"></el-table-column>
                <!-- <el-table-column prop="address1" label="地址">
                </el-table-column>
                <el-table-column prop="address2" label="地址">
                </el-table-column>
                <el-table-column prop="address3" label="地址">
                </el-table-column> -->
              </el-table>
              <Pagination
                :pageNo="pageNoToxicity"
                :total="totalToxicity"
                :pageSize="pageSize"
                @handleCurrentChange="handleCurrentChange1"
              />
            </slot>
          </el-tabs>
        </div>
      </aside>
      <aside class="m2">
        <div class="title">
          <div class="title1">Omics Data</div>
          <div class="title2" @click="DowloadFeature"><i class="el-icon-download"></i>Dowload</div>
        </div>
        <div class="list">
          <el-tabs type="border-card" @tab-click="tabClickFeature">
            <el-tab-pane
              :label="item.category"
              v-for="(item, index) in tabsItemsFeature"
              :key="index"
              :idx="item.id"
            >
            </el-tab-pane>
            <slot class="tab-right">
              <el-table :data="tableDataFeature" style="width: 100%">
                <el-table-column label="Smiles" sortable width="380">
                  <slot>
                    {{ info.smiles }}
                  </slot>
                </el-table-column>
                <el-table-column
                  prop="category"
                  label="Category"
                  sortable
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="num" label="Num" sortable width="80">
                </el-table-column>
                <el-table-column prop="source" label="source"></el-table-column>
              </el-table>
              <Pagination
                :pageNo="pageNoFeature"
                :total="totalFeature"
                :pageSize="pageSize"
                @handleCurrentChange="handleCurrentChange2"
              />
            </slot>
            <!-- <el-tab-pane label="Systematic Toxicity"
              >Systematic Toxicity</el-tab-pane
            >
            <el-tab-pane label="Carcinogenicity">Carcinogenicity</el-tab-pane>
            <el-tab-pane label="Cadiotoxicity">Cadiotoxicity</el-tab-pane>
            <el-tab-pane label="Hepatotoxicity">Hepatotoxicity</el-tab-pane>
            <el-tab-pane label="Endocrine Disruption"
              >Endocrine Disruption</el-tab-pane
            >
            <el-tab-pane label="Respiratory Toxicity"
              >Respiratory Toxicity</el-tab-pane
            >
            <el-tab-pane label="Irritation and Corrosion"
              >Irritation and Corrosion</el-tab-pane
            >
            <el-tab-pane label="CYP450">CYP450</el-tab-pane>
            <el-tab-pane label="Ecotoxicity">Ecotoxicity</el-tab-pane>
            <el-tab-pane label="Toxcast assay">Toxcast assay</el-tab-pane> -->
          </el-tabs>
        </div>
      </aside>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Pagination from "@/components/Pagination.vue";

export default {
  data() {
    return {
      defaultImage:require("../assets/img/icon1.png"),// 默认占位图
      tabsItemsToxicity: [],
      tabsItemsFeature: [],
      pageNoToxicity: 1, // 分页
      pageNoFeature: 1, // 分页
      totalToxicity: 0,
      totalFeature: 0,
      pageSize: 10,
      choosedTabToxicity: "",
      choosedTabFeature: "",
      isTry: true,
      tableDataToxicity: [],
      tableDataFeature: [],
      info: "",
      searchForm:{
        gene:"",
      }
    };
  },
  components: {
    Header,
    Pagination,
  },
  created() {
    this.searchCompoundById();
    this.getToxicityBigCategory();
    this.getFeatureBigCategory();
  },
  methods: {
    searchCompoundById() {
      this.$api
        .searchCompoundById({
          id: this.$route.query.id,
        })
        .then((res) => {
          let result = {};
          Object.keys(res)
            .filter(
              (key) =>
                !["toxicityList", "image_path", "featureList"].includes(key)
            )
            .forEach((key) => {
              result[key] = res[key];
            });
          this.info = result;
        });
    },

    // 查询毒性分类大类
    getToxicityBigCategory() {
      this.$api.getToxicityBigCategory().then((res) => {
        this.tabsItemsToxicity = res;
        this.choosedTabToxicity = res[0].id;
        this.searchToxicity();
      });
    },
    // 查询特征分类大类
    getFeatureBigCategory() {
      this.$api.getFeatureBigCategory().then((res) => {
        this.tabsItemsFeature = res;
        this.choosedTabFeature = res[0].id;
        this.searchFeature();
      });
    },
    //根据化合物id和毒性大类id查询该化合物毒性信息
    searchToxicity() {
      this.$api
        .searchToxicity({
          compoundId: this.$route.query.id,//化合物id
          toxicityId: this.choosedTabToxicity,//毒性大类id
          // compoundId: "Tox0",
          // toxicityId: 10,
          pageNo: this.pageNoToxicity,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.totalToxicity = res.total;
          this.tableDataToxicity = res.list;
        });
    },

    //根据化合物id和毒性大类id查询该化合物  特征信息
    searchFeature() {
      this.$api
        .searchFeature({
          compoundId: this.$route.query.id,//化合物id
          featureId: this.choosedTabFeature,//特征大类id
          // compoundId: "Tox0",
          // toxicityId: 10,
          pageNo: this.pageNoFeature,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.totalFeature = res.total;
          this.tableDataFeature = res.list;
        });
    },
    tabClickToxicity(tab) {
      this.pageNoToxicity = 1;
      this.choosedTabToxicity = tab.$attrs.idx;
      this.searchToxicity();
    },
    tabClickFeature(tab) {
      this.pageNoFeature = 1;
      this.choosedTabFeature = tab.$attrs.idx;
      this.searchFeature();
    },
    handleCurrentChange1(data) {
      this.pageNoToxicity = data;
      this.searchToxicity();
    },
    handleCurrentChange2(data) {
      this.pageNoFeature = data;
      this.searchFeature();
    },
    // 搜索
    handleSearch() {
      this.$router.push({
        path: "/searchAcuratCompound",
        query: this.searchForm,
      });
    },
    // 下载
    DowloadToxicity(){
        window.open(
          window.VUE_APP_BASE_URL +
            "/search/downloadByCompoundId?toxicityId=" +
            this.choosedTabToxicity + "&compoundId=" + this.$route.query.id
        );
    },
    DowloadFeature(){
        window.open(
          window.VUE_APP_BASE_URL +
            "/search/downloadFeatureByCompoundId?featureId=" +
            this.choosedTabFeature + "&compoundId=" + this.$route.query.id
        );
    },
    // 隐藏 try  下拉
    hideSearchBox(){
      this.isTry = !this.isTry
    }
  },
};
</script>

<style lang="scss" scoped>
#search {
  margin-bottom: 25px;
  width: 100%;
  height: 155px;
  background-image: url(~@/assets/img/search_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  span {
    height: 19px;
    font-size: 16px;
    font-family: Helvetica;
    color: rgba(255,255,255,0.65);
    line-height: 19px;
  }
  #search_box {
    position: relative;
    width: 620px;
    height: 50px;
    background: #f1f2f7;
    border-radius: 2px;
    padding-left: 14px;
    margin: 8px 0;
    #try {
      //width: 40px;
      height: 24px;
      font-size: 14px;
      font-family: Helvetica;
      color: #17233d;
      line-height: 24px;
    }
    #button {
      width: 88px;
      height: 50px;
      background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
      border-radius: 0px 2px 2px 0px;
      font-size: 28px;
      color: #ffffff;
    }
    input {
      flex: 1;
    }
    #search_box_muen {
      //display: none;
      width: 620px;
      background-color: #fff;
      position: absolute;
      top: 55px;
      left: 0px;
      z-index: 999;
      ul {
        padding-left: 30px;
        list-style: disc;
      }
      li {
        line-height: 25px;
      }

      h2 {
        //width: 334px;
        height: 20px;
        font-size: 16px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #17233d;
        line-height: 20px;
        margin-left: 16px;
      }
      .title1 {
        width: 91px;
        height: 22px;
        font-size: 14px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #515a6e;
        line-height: 22px;
      }
      .title2 {
        width: 302px;
        height: 20px;
        font-size: 12px;
        font-family: Helvetica;
        color: #6e5bfe;
        line-height: 20px;
      }
      .title3 {
        width: 91px;
        height: 22px;
        font-size: 12px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #515a6e;
        line-height: 22px;
      }
    }
  }
}
#main {
  width: 100%;
  //height: 1713px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  .m1 {
    margin-bottom: 25px;
    width: 1340px;
    //height: 337px;
    background: linear-gradient(331deg, #f9f6ff 0%, #ffffff 100%);
    border-radius: 2px 2px 0px 0px;
    background-repeat: no-repeat;
    //background-size: cover;
    background-position: bottom right;
    border-top: solid 6px #8853ff;
    background-color: linear-gradient(331deg, #f9f6ff 0%, #ffffff 100%);
    background-image: url(~@/assets/img/home_bg3.png);
    padding: 25px 0 25px 25px;
    display: flex;
    justify-content: space-between;
    img {
      width: 288px;
      height: 288px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #dcdee2;
      margin-right: 25px;
    }
    .content {
      flex: 1;
      h3 {
        width: 433px;
        // height: 29px;
        font-size: 24px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #17233d;
        line-height: 29px;
      }
      ul {
        width: 100%;
        font-size: 14px;
        font-family: Helvetica;
        color: #808695;
        line-height: 32px;
        .value {
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #515a6e;
        }
      }
      button {
        height: 30px;
        background: #e6e9ff;
        border-radius: 2px;
        font-size: 12px;
        font-family: Helvetica;
        color: #5169fe;
        border: none;
        margin-right: 10px;
      }
    }
  }
  .m2 {
    width: 1340px;
    //height: 615px;
    margin-bottom: 40px;
    .title {
      width: 100%;
      height: 49px;
      display: flex;
      align-items: center;
      .title1 {
        width: 1340px;
        height: 24px;
        font-size: 20px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #17233d;
        line-height: 24px;
      }
      .title2 {
        //width: 114px;
        height: 40px;
        background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
        border-radius: 2px;
        font-size: 14px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
      }
    }
    .list {
      width: 100%;
    }
  }
  .m3 {
    width: 1340px;
    height: 615px;
  }
}

//element
::v-deep {
  .el-table {
    th.el-table__cell {
      background-color: #f3efff;
    }
  }
}
//响应式设计
@media screen and (max-width: 768px) {
  #search {
    #search_box {
      width: 80vw;
      #search_box_muen {
        width: 80vw;
      }
    }
    margin-bottom: 35px;
  }
  #main {
    height: auto;
    .m1 {
      width: 90vw;
      flex-direction: column;
      align-items: center;
      position: relative;
      margin-bottom: 25px;
      img {
        width: 25vw;
        height: 25vw;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #dcdee2;
        margin-right: 25px;
        position: absolute;
        right: 0;
        top: 25px;
      }
      .content {
        width: 90vw;
      }
    }
    .m2 {
      width: 90vw;
      margin-bottom: 35px;
    }
  }
}
</style>
